<template>
  <div>
    <!-- <h3>通知附件是1，教学资源是2，新闻附件是3，课件资源是4,教学成果是5，表格下载是六</h3> -->
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">个人信息</a></el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-form :model="detail" label-width="80px">
        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item label="账号:">
              <span>{{ this.info.account }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="姓名:">
              <span>{{ this.info.name }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="角色:">
              <template>
                {{
                  this.info.roleType == 0
                    ? "学生"
                    : this.info.roleType == 1
                    ? "教师"
                    : this.info.roleType == 2
                    ? "数据中心管理员"
                    : this.info.roleType == 4
                    ? "高级教师"
                    : "系统管理员"
                }}
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item label="分院:">
              <span>{{ this.info.brcachMame }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="班级:">
              <span>{{ this.info.className }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="教师编号:">
              <span>{{ this.info.teacherCode }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item label="性别:">
              <template>
                {{
                  this.info.sex == 0 ? "男" : this.info.sex == 1 ? "女" : "未知"
                }}
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="职称:">
              <span>{{ this.info.title }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机号:">
              <span>{{ this.info.mobile }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item label="电子邮箱:">
              <span>{{ this.info.email }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="昵称:">
              <span>{{ this.info.nickname }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出生日期:">
              <span>{{ this.info.birthday }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="办公电话:">
          <span>{{ this.info.officePhone }}</span>
        </el-form-item>
        <el-form-item label="创建时间:">
          <span>{{ this.info.createTime }}</span>
        </el-form-item>
        <el-form-item label="修改时间:">
          <span>{{ this.info.modifyTime }}</span>
        </el-form-item>
        <el-form-item label="备注:">
          <span>{{ this.info.remarks }}</span>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="3">
            <el-button type="primary" @click="showEditDialog"
              >修改个人信息</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 自定义列 -->
    <CustomColumn ref="columns" :showColumns="showColumns"></CustomColumn>

    <!-- 修改 -->
    <el-dialog
      title="修改用户"
      :visible.sync="showEditVisible"
      width="70%"
      @close="hideEditDialog"
      center
    >
      <el-form :model="editForm" ref="editFormRef" label-width="80px">
        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item label="账号:" prop="account">
              <el-input v-model="editForm.account" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="密码:" prop="password">
              <el-input
                type="password"
                v-model="editForm.password"
              ></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
            <el-form-item
              label="角色:"
              prop="roleType"
              :rules="[
                { required: true, message: '角色不能为空', trigger: 'blur' },
              ]"
            >
              <el-select style="width: 100%" v-model="editForm.roleType">
                <el-option label="学生" :value="0"></el-option>
                <el-option label="教师" :value="1"></el-option>
                <el-option label="数据中心管理员" :value="2"></el-option>
                <el-option label="系统管理员" :value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item label="姓名:">
              <el-input v-model="editForm.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="分院:">
              <el-input v-model="editForm.brcachMame"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="班级:">
              <el-input v-model="editForm.className"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item label="教师编号:">
              <el-input v-model="editForm.teacherCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="职称:">
              <el-input v-model="editForm.title"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="性别:">
              <el-select style="width: 100%" v-model="editForm.sex">
                <el-option label="男" :value="0"></el-option>
                <el-option label="女" :value="1"></el-option>
                <el-option label="未知" :value="null"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item label="电子邮箱:">
              <el-input v-model="editForm.email"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机号:">
              <el-input v-model="editForm.mobile"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="办公电话:">
              <el-input v-model="editForm.officePhone"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item label="昵称:">
              <el-input v-model="editForm.nickname"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出生日期:">
              <el-date-picker
                v-model="editForm.birthday"
                clearable
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期"
                style="width: 100%"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注:">
          <el-input type="textarea" v-model="editForm.remarks"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="hideEditDialog">取 消</el-button>
        <el-button type="primary" @click="edit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import md5 from "js-md5";
import CustomColumn from "./components/CustomColumn.vue";
export default {
  components: { CustomColumn },
  data() {
    return {
      info: {},
      // 查询条件
      query: {
        name: "",
        pageNum: 1,
        pageSize: 8,
      },
      // 内容列表
      list: [],
      // 内容总条数
      total: 0,
      // 初始化显示字段
      showColumns: [
        { label: "账户", show: true },
        { label: "角色", show: true },
        { label: "姓名", show: true },
        { label: "分院", show: false },
        { label: "班级", show: false },
        { label: "教师编号", show: true },
        { label: "性别", show: true },
        { label: "职称", show: false },
        { label: "手机号", show: false },
        { label: "电子邮箱", show: false },
        { label: "昵称", show: false },
        { label: "出生日期", show: false },
        { label: "办公电话", show: false },
        { label: "创建时间", show: true },
        { label: "修改时间", show: false },
        { label: "备注", show: true },
      ],
      // 是否显示详情
      showDetailVisible: false,
      // 数据详情
      detail: {},
      // 是否显示新增
      showAddVisible: false,
      // 新增数据
      addForm: {},
      // 是否显示修改
      showEditVisible: false,
      // 修改数据
      editForm: {},
    };
  },
  created() {
    this.getList();
    this.getList2();
  },
  methods: {
    logout() {
      window.sessionStorage.clear();
      this.$router.push("/a1/a2");
    },
    // 显示自定义列
    showSetColumn() {
      this.$refs.columns.dialogVisible = true;
    },
    // 获取内容列表
    getList2() {
      var userInfo = JSON.parse(localStorage.getItem("userInfo"));
      // console.log(userInfo.account);
      this.info = userInfo;
    },
    getList() {
      this.$http.post("/v1/api/users/page", this.query).then((res) => {
        if (res.data.code == 0) {
          this.list = res.data.data.list;
          this.total = res.data.data.total;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 监听 pageSize 改变的事件
    handleSizeChange(pageSize) {
      this.query.pageSize = pageSize;
      this.getList();
    },
    // 监听 page 改变的事件
    handleCurrentChange(page) {
      this.query.pageNum = page;
      this.getList();
    },
    // // 显示详情
    // showDetailDialog(row) {
    //   this.detail = row;
    //   this.showDetailVisible = true;
    // },
    // // 隐藏详情
    // hideDetailDialog() {
    //   this.detail = {};
    //   this.showDetailVisible = true;
    // },
    // 显示新增
    showAddDialog() {
      this.addForm = {
        // 备注
        remarks: "",
        // 账号(用户名)
        account: "",
        // 密码(需md5加密)
        password: "",
        // 所在分院，如：计算分院
        brcachMame: "",
        // 教师号
        teacherCode: "",
        // 职称
        title: "",
        // 所在班级，如：计算1803
        className: "",
        // 姓名
        name: "",
        // 头像短链接
        portrait: "",
        // 性别,0:男,1:女
        sex: 0,
        // 昵称
        nickname: "",
        // 出生日期
        birthday: "",
        // 办公电话
        officePhone: "",
        // 手机号
        mobile: "",
        // 电子邮箱
        email: "",
        // 角色类型（枚举），0:普通用户，1:教师用户，2:数据中心管理员，3:系统管理员
        roleType: 0,
      };
      this.showAddVisible = true;
    },
    // 显示修改
    showEditDialog(row) {
      this.editForm = this.info;
      this.showEditVisible = true;
    },
    // 隐藏修改
    hideEditDialog() {
      this.showEditVisible = false;
    },
    // 修改
    edit() {
      this.editForm.password = md5(this.editForm.password);
      this.$refs.editFormRef.validate((valid) => {
        if (valid) {
          this.$http.put("/v1/api/users", this.editForm).then((res) => {
            if (res.data.code == 0) {
              this.getList();
              this.$message.success("修改成功");
              this.showEditVisible = false;
            } else {
              this.$message.error(res.data.msg);
            }
          });
        } else {
          this.$message.error("请填写必填项");
          return false;
        }
      });
      window.sessionStorage.clear();
      this.$router.push("/a1/a2");
    },
  },
};
</script>

<style lang="less" scoped>
.el-breadcrumb {
  margin-bottom: 15px;
  font-size: 12px;
}
</style>
